<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<script type="text/javascript">
    $(document).ready(selectInit);

    // apply event handlers to rootNode, if rootNode is null.. apply them globably.
    function selectInit(rootNode) {
        if(rootNode == undefined || rootNode == null) {
            rootNode = $(document);
        }

        // events for showing individual urls in the preview area.
        $('span.previewUrl', rootNode).each(function() {
            $(this).mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");});
            $(this).bind('click', function() {
                $('div#viewer').html('<img src="<c:url value="/images/big_loading.gif"/>"/> Please wait... ');
                $.get(contextPath + "ajax/Video.action", {videoUrl: $(this).attr("videoId")}, function(data) {
                    $('div#viewer').html(data);
                });
            });
        });

        // events for showing full playlist contents in preview area.
        $('span.playListTitle', rootNode).each(function() {
            $(this).mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");});
            $(this).bind('click', function() {
                $('div#viewer').html('<img src="<c:url value="/images/big_loading.gif"/>"/> Please wait... ');
                $.get(contextPath + "ajax/Video.action", {listId: $(this).attr('listId')}, function(data) {
                    $('div#viewer').html(data);
                });
            });
        });

        // events for removing urls
        $('span.removeUrl', rootNode).each(function() {
            $(this).bind('click', function() {
                var videoId = $(this).attr('videoId');
                var listId = $(this).attr('listId');
                $.post(contextPath + "ajax/EditPlayList.action", {videoUrl: videoId, listId: listId, deleteUrl: 'deleteUrl'}, function(data) {
                    // remove the actual table row.
                    $('//tr[@rowId="' + listId + "_" + videoId + '"]').remove();
                });
            });
        });

        // events for editing urls
        $('span.editUrl', rootNode).each(function() {
            $(this).bind('click', function() {
                var listId = $(this).attr('listId');
                var videoId = $(this).attr('videoId');
                $.post(contextPath + "ajax/EditPlayList.action", {videoUrl: videoId, listId: listId, deleteUrl: 'deleteUrl'}, function(data) {
                    $('//tr[@rowId="' + listId + "_" + videoId + '"]').remove();
                    $('input#url-'+listId).val(videoId);
                });
            });
        });

        // event for adding urls to playlists.
        $('form.addItemForm', rootNode).each(function() {
            $('input.addUrl', $(this)).bind('click', function() {
                var formData = $('form#form-' + this.id + '/input').serialize();
                var listId = $('form#form-' + this.id + '/input[@name="listId"]').val();
                var videoId = $('form#form-' + this.id + '/input[@name="videoUrl"]').val();
                $.post(contextPath + "ajax/EditPlayList.action?"+formData, function(data) {
                    // add the new row to the playlist body
                    $('#table-' + listId).append(data);
                    // add the required event handlers to the new row (edit/delete/etc)
                    selectInit($('//tr[@rowId="' + listId + "_" + videoId + '"]'));
                    $('input#url-'+listId).val('');
                });
            });
        });

        // delete playlist event.
        $('span.deleteList', rootNode).bind('click', function() {
            if(confirm("are you sure you want to delete this playList?")) {
                $.post(contextPath + "ajax/EditPlayList.action?deletePlayList=deletePlayList&listId="+$(this).attr('listId'), function(data) {
                    $('div#playLists').html(data);
                    selectInit();
                });
            }
        });

        // hide all the playlist bodies by default.
        $('.playListBody', rootNode).each(function () {
            $(this).slideUp();
        });

        // toggle hide/show playlist body event
        $('span.expandCollapseLink', rootNode).bind('click', function() {
            // hide show body
            $('#body-' + $(this).attr('listId')).slideToggle();
        });

        // publish this list.
        $('span.publishList').bind('click', function() {
            $.post(contextPath + "ajax/EditPlayList.action?publish=publish&listId="+$(this).attr('listId'), function(data) {
            });
        });
    }
</script>
<table id="playListTable">
    <%-- two column table of playlists. --%>
    <c:forEach var="count" begin="0" end="${fn:length(playLists)}" step="2">
        <tr>
            <c:forEach var="list" items="${playLists}" begin="${count}" end="${count+1}">
                <td valign="top" nowrap="true">
                    <div class="playList" >
                        <div class="playListHeader" listId="${list.id}">
                            <%-- expand collapse --%>
                            [<span listid="${list.id}" class="expandCollapseLink fakeLink">+/-</span>]
                            <%-- playlist name--%>
                            <span class="playListTitle" listId="${list.id}">${list.name}</span>

                            <%-- link to playlist, returned as rss/xml feed --%>
                            <a href="<c:url value="/PlayList.action">
                                <c:param name="playListId" value="${list.id}"/>
                                <c:param name="feed" value="feed"/>
                            </c:url>" class="imageLink"><img src="<c:url value="/images/feed.png"/>" alt="Playlist RSS Feed" title="Playlist RSS Feed" border="0"/></a>

                            <%-- delete link --%>
                            <span listid="${list.id}" class="deleteList imageLink"><img src="<c:url value="/images/delete.png"/>" alt="delete this playlist" title="delete playlist" border="0"/></span>
<%--
                            [<span listid="${list.id}" class="publishList imageLink">pub</span>]
--%>
                        </div>
                        <div class="playListBody" id="body-${list.id}">
                            <br/>
                            <%-- show each source. --%>
                            <c:forEach var="source" items="${list.sources}">
                                <c:set var="url" value="${source.ccUrl}"/>
                                <table id="table-${list.id}">
                                    <%@ include file="playlist_item.jsp" %>
                                </table>
                            </c:forEach>
                            <br/>

                            <%-- form for manually adding castcluster urls --%>
                            <form class="addItemForm" id="form-${list.id}" onsubmit="$('#${list.id}').click();return false;">
                                &nbsp;&nbsp;&nbsp;&nbsp;<input type="hidden" name="listId" value="${list.id}"/>
                                <input type="text"   id="url-${list.id}" name="videoUrl"/>
                                <input type="button" name="addUrl" class="addUrl" id="${list.id}" value="add"/>
                            </form>
                        </div>
                    </div>
                </td>
            </c:forEach>
        </tr>
    </c:forEach>
</table>
